{% extends "app_page.html" %}
{% load i18n %}
{% load dbapp_tags %}

{% block model_extend %}
	<div id="id_model_extend" class="noUnderl">
		<div class="leftBoxTop">
	        <ul class="Link_blue2 img_padding">
	            <div id="id_op_for_tab">
                    {% if request.user|HasPerm:"att.opuploadattlog_checkinout" or request.session.employee %}
                        <li id="id_OpUploadAttLog" title={% trans '上传U盘考勤记录'%} name="OpUploadAttLog"><a href="javascript:void(0)" id = "id_u_a" alt="OpUploadAttLog" ref="/att/import_u_data"><span class="action_OpUploadAttLog"></span>{% trans '上传U盘考勤记录'%}</a></li>
                        <div class="div_leftBottomLine"></div>
                    {% endif %}
                    {% if request.user|HasPerm:"att.opautoexport_checkinout" or request.session.employee %}
                        {% if "MALAYSIA"|filter_config_option%}
                        <li id="id_OpAutoExport" title={% trans '自动导出'%} name="OpAutoExport"><a href="javascript:void(0)" id = "id_auto_export" alt="OpAutoExport" ref="/att/auto_export/"><span class="action_OpUploadAttLog"></span>{% trans '自动导出'%}</a></li>
                        <div class="div_leftBottomLine"></div>
                        {% endif %}
                    {% endif %}
	            	<!--<li id="id_dataimport" title="自定义导入记录" name="dataimport"><a href="javascript:void(0)" id= "id_self_a" alt="dataimport" ref="/att/import_self_data"><span class="action_dataimport"></span>自定义导入记录</a></li>
	            	<div class="div_leftBottomLine"></div>-->
		         </div>
		    </ul>
	    </div>
	</div>
{% endblock %}

{% block content %}
    {% autoescape off %}
	<div id = "search_div" class="news_topsearch" style="height: 44px">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="50"><div class="news_topsearch1" style="height: 44px; line-height:44px">{% trans '查询' %}</div></td>
				<td>
					<table style="margin:0px 0px 0px 15px">
						<tr>
                            {{ form.pin|field_as_td_h }}
                            {{ form.emp_name|field_as_td_h }}
                            {{ form.DeptName|field_as_td_h }}
                            {{ form.sn_num|field_as_td_h }}
                            {{ form.device_name|field_as_td_h }}
                        </tr>
                        <tr>
                            {{ form.status|field_as_td_h }}
                            {{ form.area_name|field_as_td_h }}
                            {{ form.start|field_as_td_h }}
                            {{ form.end|field_as_td_h }}
                            <td><div style="margin:0px 0px 0px 5px;"><span class="action_Search">&nbsp;</span><a id="id_query" href='javascript:void(0)' class="Link_blue1" >{% trans '查询' %}</a></div></td>
                        </tr>
						<tr><td colspan="3">
							<div id="id_ReturnMsg" class="div_ReturnMsg"></div></td>
						</tr>
					</table>
			     </td>
			  </tr>
		</table>
	</div>
     {% endautoescape %}
	<div id="grid_frame_div" style="margin:3px 3px 3px 10px;">
		<table width="100%">
			<tr>
				<td height="450" width="80%">
					<iframe src="/page/att/CheckInOutGrid/?pure" id="grid_frame" frameborder="0" scrolling="0" width="100%" height="450"></iframe>
				</td>
				<td width="20%">
				    <div id="show_att_photo" class="div_box" width="100%" height="450" style="margin:-10px 5px 0 0">
			            <h1>{% trans '考勤照片' %}</h1>
			            <div id="photo_area" class="div_photobox">
                            <div id="data-tip" align='center'><h4><span class='icon_Shift_Detail'>&nbsp;</span>{% trans '单击记录查看考勤照片' %}</h4></div>
			            	<div id="data-table" style="display: none">
                                <table class="div_photoboxtab" width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td colspan="2" align="center" ><img id="capture_img" src="" onerror=""></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '人员编号' %}</th>
                                        <td><span id="clicked-pin"></span></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '姓名' %}</th>
                                        <td><span id="clicked-name"></span></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '部门' %}</th>
                                        <td><span id="clicked-dept"></span></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '考勤时间' %}</th>
                                        <td><span id="clicked-att"></span></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '考勤区域' %}</th>
                                        <td><span id="clicked-area"></span></td>
                                    </tr>
                                    <tr>
                                        <th>{% trans '设备序列号' %}</th>
                                        <td><span id="clicked-dev"></span></td>
                                    </tr>
                                <tbody></tbody>
                            </table></div>
			            </div>
			        </div>
				</td>
			</tr>
		</table>
	</div>
    <div id='status_configure' style='width:600px ;height:400px;display: none'>
        <form action="" id="id_form_status">
            <table></table>
        </form>
    </div>
{% endblock %}

{% block end_block %}
	<script language="JavaScript">
        var processLayer = null;
        var processInterval = null;
        var requestStamp = '';
        var dataTotal = 0
        layer.config({
            extend: 'extend/layer.ext.js'
        });
		function init_page(){
		    //$("#photo_area").html("<div align='center'><h4><span class='icon_Shift_Detail'>&nbsp;</span>"+gettext('单击记录查看考勤照片')+"</h4></div>");
		    $("#id_u_a").unbind().click(function(){
		    	var url=$(this).attr("ref");
		        var html="<div style='width:450px ;height:250px'><form id='form_u_import' enctype='multipart/form-data'> {% csrf_token %}"        	
		           +"<table style='width:440px ;height:160px; margin:20px 10px 20px 10px;'>"
		           		//+"<tr height = '30px'><th><label for='dev_select'>"+gettext('选择设备')+":</label></th><td><select style='width:180px;' name='dev_select' id='dev_select' ></td></tr>"
                        //+"<tr height = '30px'><th><label for='dev_select'>"+gettext('设备序列号')+":</label></th><td><input style='width:180px;' name='dev_select' id='dev_select' ></td></tr>"
                        +"<tr height = '30px'><td colspan=2><label for='dev_select'>"+gettext('Format of file name')+":[{% trans '设备序列号' %}]_xxx.dat</label></td</tr>"
                        +"<tr height = '50px'><th><label for='id_upload_attlog'>"+gettext('选择考勤记录文件')+":</label></th><td><input type='file' name='upload_attlog' class='wZBaseFileField' id='id_upload_attlog'></td></tr>"
		           		+"<tr height = '50px' align='center'><td colspan='2'><label style= 'color:red;' id= 'res_tip'></label></td></tr>"
		           +"</table>"
		           +"</form></div>";

                var options = {
                    title: gettext("上传U盘考勤记录"),
                    skin: 'option_dialog',
                    btn: [gettext("确定"),gettext("取消")],
                    yes: function(index, layero){
                        if($("#id_upload_attlog").val()==""){
                            $("#res_tip").html(gettext("请选择文件!"));
                            return;
                        }
                        //if($("#dev_select").val()==""){
                        //    $("#res_tip").html(gettext("请选择设备!"));
                        //    return;
                        //}
                        $("#res_tip").html("")
                        layero.find("#form_u_import").ajaxSubmit({
                               type:"POST",
                               url:url,
                               success:function(msg){
                                   if(msg.indexOf('OK') != -1){
                                       $("#res_tip").css({color:'blue'}).html(gettext('上传成功'));
                                       setTimeout(function(){
                                           layer.close(index);
                                       }, 2000)
                                   }else{
                                       $("#res_tip").html(msg)
                                   }
                               }
                        });
                    },
                    cancel: function(index){
                        layer.close(index);
                    },
                    success: function(){
                        //flush_dev();
                    }
                };
                $(html).layerDialog(options);
		    });
            $("#id_OpConfigure").unbind().click(function(){
                var url=$(this).attr("ref");
                var options = {
                    title: gettext("Status Setting"),
                    skin: 'option_dialog',
                    area: ['350px', '350px'],
                    btn: [gettext("确定"),gettext("取消")],
                    yes: function(index, layero){

                    },
                    cancel: function(index){
                        layer.close(index);
                    },
                    success: function(layero){

                    }
                };
                $("#status_configure").layerDialog(options);
            });
            function render_tasks_main(obj){
                if(obj == undefined){
                    obj = $("#id_task").val();
                }
                $.ajax({
                    url: '/att/auto_export_tasks/?task='+obj,
                    type: 'GET',
                    dataType: 'html',
                    success: function(callback) {
                        $("#id_task_panel").empty();
                        $("#id_task_panel").html(callback);
                    }
                })
            };
		    $("#id_auto_export").unbind().click(function(){
                var url=$(this).attr("ref");
                var loadIndex = layer.load(0, {shade: false});
                $.ajax({
                    url: '/att/auto_export_panel/',
                    type: 'GET',
                    dataType: 'html',
                    success: function(callback){
                        var options = {
                            title: '{% trans '自动导出'%}',
                            skin: 'option_dialog',
                            area: ['auto', 'auto'],
                            content: callback,
                            maxmin: false,
                            closeBtn: 0,
                            shadeClose: true,
                            zIndex: 5,
                            type: 1,
                            btn:[gettext("确定"), 'Save as new task', gettext("取消")],
                            yes: function(index, layero){
                                $(layero).find(("#manual_process")).html('');
                                $(layero).find(("#export_res_tip")).html('');
                                $(layero).find(("#export_res_tip")).html('<i id="id_spinner" class="icon-spinner icon-spin">');
                                $(layero).find("#id_form_auto").ajaxSubmit({
                                    dataType: 'json',
                                    type:"POST",
                                    url: "/att/auto_export_task/",
                                    success:function(callback){
                                       var msg = callback.ret;
                                       if(msg.indexOf('OK') != -1){
                                           $(layero).find(("#export_res_tip")).css({color:'blue'}).html(gettext('保存成功'));
                                           render_tasks_main()
                                       }
                                       else{
                                           $(layero).find(("#export_res_tip")).html(msg)
                                       }
                                   }
                                });
                            },
                            btn2: function(index, layero){
                                $(layero).find(("#manual_process")).html('');
                                $(layero).find(("#export_res_tip")).html('');
                                $(layero).find(("#export_res_tip")).html('<i id="id_spinner" class="icon-spinner icon-spin">');
                                $(layero).find("#id_form_auto").ajaxSubmit({
                                    dataType: 'json',
                                    type:"POST",
                                    url: "/att/auto_export_task/?_new=1",
                                    success:function(callback){
                                       var msg = callback.ret;
                                       if(msg.indexOf('OK') != -1){
                                           $(layero).find(("#export_res_tip")).css({color:'blue'}).html(gettext('保存成功'));
                                           render_tasks_main(callback.obj)
                                       }
                                       else{
                                           $(layero).find(("#export_res_tip")).html(msg)
                                       }
                                   }
                                });
                            },
                            no: function (index, layero) {
                                layer.close(index);
                                clearInterval(processInterval);
                            },
                            cancel: function(index){
                                return false;
                            },
                            success: function(layero){
                                processLayer = layero;
                                render_widgets($(layero).find("#id_form_auto"));
                                layer.close(loadIndex);
                            },
                            error: function(){
                            }
                        };
                        top.layer.open(options);
                    }
                });
            });
		    $("#id_self_a").unbind().click(function(){
		    	var url=$(this).attr("ref")
		        var html="<div style='width:450px ;height:250px'><form id='form_self_import' enctype='multipart/form-data'> {% csrf_token %}"
		           +"<table style='width:400px ;height:150px; margin:20px 10px 20px 10px;'>"
		           		+"<tr height='40px'><th><label for='id_import_data'>"+gettext('选择需要导入的文件')+":</label></th><td><input type='file' id='id_import_data' class='wZBaseFileField' name='import_data'/></td></tr>"
		           		+"<tr height='40px'> <th></th> <td>"+gettext('只支持.xls格式文件')+" &nbsp;<a href='/data/system/help/?p=/file/zh-cn/help/transaction_import.html' target='_blank'>"+gettext('如何获取?')+"</a></td></tr>"
		           		+"<tr height = '50px' align='center'><td colspan='2'><label style= 'color:red;' id= 'res_tip1'></label></td></tr>"
		           	+"</table>"
		           +"</form></div>"
		        var showhtml=$(html)
		        var cancel=function(div){					
		               $("#id_close").click();
		        };
		        var save_ok=function(){	
		        	if($("#id_import_data").val()==""){
		        		$("#res_tip1").html(gettext("请选择文件!"));
			            return;
			         }
		        	$("#res_tip1").html("")
		        	showhtml.find("#form_self_import").ajaxSubmit({
		                   type:"POST",
		                   url:url,
		                   success:function(msg){
	                           $("#res_tip1").html(msg)
		                   }					
		            });	
		        };
		        var ok_name = gettext('上传');
		        var cancel_name = gettext('关闭');
		        var btn_dict={};
		        btn_dict["buttons"]={}
		        btn_dict["buttons"][ok_name]=save_ok;
		        btn_dict["buttons"][cancel_name]=cancel;
		        btn_dict["title"]=gettext("自定义导入记录");
		        showhtml.dialog(btn_dict);
		    });
		}
				
		$(function(){
			$("#id_query").click(query);
			$("#search_div").find("input:first").focus();
			$("#search_div").find("input").keydown(function(event){//按回车键直接查询
		        if(event.keyCode==13)
		        {
		        	$("#search_div").find("#id_query").click();
		        }
		    });
			$("#grid_frame").load(function(){
				//特殊处理 iframe session 过期后 刷新整个界面,重新登录
				var title_flag = $("#grid_frame").contents().find("title")
				if(title_flag.length>0 && title_flag.html().indexOf("登录")!=-1){
					alert(gettext("会话已经超时,请重新登录!"));
					window.location.reload();
				}
			})
			$("#id_page_load").remove()
		    init_page();
		});
		function flush_dev(){
			$("#dev_select").empty();
		    $.ajax({
		        url:"/manager/getDevInfo/?device_type=1",
		        type:"POST",
		        dataType:"json",
		        success:function(msg){
			    	if(!msg.data==null || !msg.data==""){
			    		data = msg.data
			    		for (i = 0; i<data.length;i++){
			    			$("#dev_select").append('<option value="'+data[i][0]+'">'+data[i][1]+'<'+data[i][0]+'>'+'</option>');
			    		}
			    	}
		        }
		    });
		}
		function get_where(){
			var where = ["pure"];
			$("#search_div").find('input,select').each(function(){
		    if($(this).val()!=""){
		    	where.push($(this).attr("name")+"="+$(this).val());
			    }
			});
			return where.join("&");
		}
		
		function load_data(url,content_id){
			$(content_id).attr("src",url)
		}
		
		function query(){
			var where_str = get_where();
			var url = "/page/att/CheckInOutGrid/?"+where_str ;
			load_data(url,"#grid_frame") ;
		}
	</script>
{% endblock %}